@use 'sass:map';
@use 'sass:color';
@use '@angular/material' as mat;
@use './setting/settings-theme' as settings;
@use './story/story-theme' as story;
@use './semantic-model/semantic-models' as semantic-models;
@use './indicator/indicator-theme' as indicator;
@use './home/home-theme' as home;
@import '../@core/variables';

$shell-bar-height: 48px;
$sidebar-width: 200px;
$sidebar-collapsed-width: 40px;

@mixin color($theme) {
  $config: mat.get-color-config($theme);

  $primary: map.get($config, 'primary');
  $accent: map.get($config, accent);
  $background: map.get($config, background);
  $foreground: map.get($config, foreground);

  @include home.color($theme);
  @include settings.color($theme);
  @include story.color($theme);
  @include semantic-models.color($theme);
  @include indicator.color($theme);

  .mat-toolbar.pac__shell-bar {
    // position: relative; // 使 z-index 生效的属性
    z-index: 2;
    height: $shell-bar-height;
    padding: 0 .5rem;

    .mat-mdc-tab-link {
      height: $shell-bar-height;
    }

    .mat-mdc-icon-button {
      background-color: unset;
    }

    .pac__navigation {
      display: flex;
      align-items: center;
      background: unset;
      border-bottom: unset;
      line-height: 40px;
      color: mat.get-color-from-palette($primary, 'darker-contrast');

      .mat-divider-vertical {
        height: 20px;
        border-right-width: 2px;
        margin: auto;
      }

      .mat-button {
        padding-right: 0;
      }
    }
  }

  .pac__toolbar.mat-toolbar {
    padding: 0;
    
    .mat-mdc-tab-nav-bar {
      border-bottom: unset;
      max-width: 100%;
      .mat-mdc-tab-link {
        height: 36px;
        padding: 0 1rem;
        color: mat.get-color-from-palette($primary, '100-contrast');
      }
    }
  }
  .pac-toolbar__editor {
    box-shadow: 0 0.3px 0.9px #0000001c, 0 1.6px 3.6px #0002;
  }

  // .pac-app__page-outlet.mat-drawer-content {
  //   display: flex;
  //   flex: 1;
  //   // height: calc(100vh - #{$shell-bar-height} - #{$status-bar-height});
  //   position: relative;
  //   // overflow: auto;
  //   overflow: hidden;

  //   /* 所有的 toolbar 都不设置高度 */
  //   .mat-toolbar-row, .pac__toolbar.mat-toolbar-single-row {
  //     height: unset;
  //     font-size: 1rem;
  //     min-height: var(--header-toolbar-height);
  //   }

  //   .pac-app__spinner {
  //     position: absolute;
  //     top: 0;
  //     left: 0;
  //     width: 100%;
  //     height: 100%;
  //   }
  // }

  .cdk-overlay-container .ant-menu-submenu-popup > .ant-menu {
    background-color: mat.get-color-from-palette($primary, 900);
    user-select: none;
  }

  .pac-sketch-card.mat-mdc-card {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 6px;

    &:hover {
      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    }
    &:active {
      box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, mat.get-color-from-palette($primary, 300) 0px 0px 0px 1px;
    }
  }

  body:not(.mobile) {
    .pac-page__body {
      padding: 24px;
      overflow: auto;
    }

    ngm-tree-table {
      .cdk-row {
        .pac__table-actions {
          margin: -5px 0;
          opacity: 0;

          & > * {
            opacity: 0;
          }
      
          .mat-mdc-icon-button.mat-accent {
            opacity: 1;
          }
        }
      
        &:hover {
          .pac__table-actions {
            opacity: 1;
          }
          
          .pac__table-actions > * {
            opacity: 1;
          }
        }
      }
    }
  }

  .pac-pro-tag {
    background-color: mat.get-color-from-palette($accent, 300);
    padding: 1px 5px;
    border-radius: 5px;
  }
  
  // 带 nav-bar 的 toolbar 组件样式
  .pac-nav-toolbar.mat-toolbar {
    // &.ngm-density__compact.mat-toolbar-single-row {
    //   padding: 0;
    // }

    .mat-mdc-tab-nav-bar,
    .mat-mdc-tab-header {
      border-bottom: unset;
    }

    .mat-mdc-tab-link {
      min-width: unset;
      align-items: center;

      &.mat-mdc-tab-label-active {
        background-color: mat.get-color-from-palette($background, background);
      }

      .pac-nav-tab__close {
        margin-right: -20px;
        opacity: 0;
        transition: all 300ms ease-in;
      }

      // 导航菜单间隔符
      &::after {
        content: "";
        height: 15px;
        width: 2px;
        background-color: mat.get-color-from-palette($foreground, divider);
        position: absolute;
        right: 0;
        border-radius: 2px;
      }
    }

    .mat-mdc-tab-nav-bar {
      .mdc-tab--active,
      .mat-mdc-tab-label .mat-mdc-tab-label-active {
        .pac-nav-tab__close {
          opacity: .5;
        }
      }

      .pac-nav-tab__close:hover {
        opacity: 1;
      }
      .pac-nav-tab__close.active {
        opacity: 1;
      }
    }

    .mat-mdc-tab-links {
      align-items: center;
    }

    .pac-badge-status-dot {
      position: absolute;
      left: -1rem;
    }

    &.ngm-density__compact {
      .mat-button {
        min-width: unset;
        border-radius: 0;
        line-height: 32px;
        height: 32px;

        &.mat-accent {
          background-color: color.change(mat.get-color-from-palette($accent), $alpha: 0.1);
        }
      }
    }
  }
}

@mixin typography($theme) {
  @include home.typography($theme);
  @include semantic-models.typography($theme);
}

@mixin density($theme) {
  @include home.density($theme);
  @include story.density($theme);
  @include semantic-models.density($theme);
  @include indicator.density($theme);

  .pac-nav-toolbar.mat-toolbar {
    &.ngm-density__compact {
      .mat-mdc-tab-header {
        --mdc-secondary-navigation-tab-container-height: 32px;
      }
    }
  }
}

@mixin theme($theme) {
  $color: mat.get-color-config($theme);
  $density: mat.get-density-config($theme);
  $typography: mat.get-typography-config($theme);

  @if $color != null {
    @include color($color);
  }
  @if $density != null {
    @include density($density);
  }
  @if $typography != null {
    @include typography($typography);
  }
}
